<route lang="json5">
{
  needLogin: true,
  style: {
    navigationBarTitleText: '群二维码',
  },
}
</route>
<template>
  <view class="qrcode-page">
    <!-- 群组信息 -->
    <view class="group-content">
      <!-- 群头像 -->
      <image
        :src="groupInfo.headImage || '/static/images/group/default-avatar.png'"
        class="group-avatar"
        mode="aspectFill"
      />
      <!-- 群名称 -->
      <view class="group-name">{{ groupInfo.showGroupName }}</view>
      <!-- 群号 -->
      <view class="group-id">群号：{{ groupInfo.groupId }}</view>
      <!-- 二维码区域 -->
      <view class="qrcode-box">
        <view class="qrcode-main flex items-center justify-center">
          <uqrcode
            ref="uqrcodeRef"
            class=""
            canvas-id="qrcode"
            size="140"
            :value="groupInfo.groupCode ? `${groupInfo.groupCode}` : ''"
            :options="{}"
          ></uqrcode>
        </view>
      </view>
    </view>
    <!-- 保存按钮 -->
    <view class="save-btn-wrapper">
      <wd-button block type="primary" size="large" custom-class="save-btn" @click="handleSave">
        保存图片
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { findGroupInfo } from '@/service/edu/group'
import { useToast } from 'wot-design-uni'
const toast = useToast()
const uqrcodeRef = ref(null)
const groupInfo = ref({
  groupCode: '',
  groupId: '',
  showGroupName: '',
  name: '',
  headImage: '',
})
onLoad(() => {
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const query = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
  if (query) {
    groupInfo.value.groupId = query.groupId
    handleGetInfo(query.groupId)
  }
})
const handleCode = (groupId) => {
  const data = {
    type: 'group',
    id: groupId,
    headImage: groupInfo.value.headImage,
    name: groupInfo.value.name || groupInfo.value.showGroupName || '群名称',
  }
  groupInfo.value.groupCode = JSON.stringify(data)
}
const handleGetInfo = (groupId) => {
  findGroupInfo(groupId).then((group) => {
    if (group.code === 200) {
      groupInfo.value.name = group?.data?.name
      groupInfo.value.showGroupName = group?.data?.showGroupName
      groupInfo.value.headImage = group?.data?.headImage || group?.data?.headImageThumb
      handleCode(groupInfo.value.groupId)
    }
  })
}
// 保存图片
const handleSave = async () => {
  try {
    uni.showLoading()
    uqrcodeRef.value.save({
      success: () => {
        toast.show('已保存到系统相册')
      },
    })
  } catch (error) {
    console.error('保存失败:', error)
    toast.show('保存到系统相册失败')
  } finally {
    uni.hideLoading()
  }
}
</script>

<style lang="scss" scoped>
.qrcode-page {
  height: 100vh;
  background-color: #fff;
}
.group-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 95rpx 0 0 0;
  .group-avatar {
    box-sizing: border-box;
    width: 96rpx;
    height: 96rpx;
    margin-bottom: 33rpx;
    border: 1px solid #d8d8d8;
    border-radius: 16rpx;
  }
  .group-name {
    margin-bottom: 12rpx;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 48rpx;
    color: #3d3d3d;
  }
  .group-id {
    align-items: center;
    margin-bottom: 72rpx;
    line-height: 37rpx;
    color: #767676;
    letter-spacing: 0px;
  }
  .qrcode-box {
    display: flex;
    width: 378rpx;
    height: 378rpx;
    background-color: #c3d5fd;
    border: 20rpx solid #c3d5fd;
  }
  .qrcode-main {
    width: 100%;
    margin: 20rpx;
    background-color: #ffffff;
  }
}
.save-btn-wrapper {
  padding: 0 70rpx 0 66rpx;
  margin: 190rpx auto;
  .save-btn {
    height: 96rpx !important;
    font-size: 34rpx !important;
    font-weight: 500 !important;
    background: linear-gradient(-90deg, #0d53ff 0%, #20a4ff 100%) !important;
    border: none !important;
    border-radius: 20rpx !important;
  }
}
</style>
